function initSwitchTab() {
    let tabSession = document.querySelector('.tab .tab-session');
    let tabFriend = document.querySelector('.tab .tab-friend');

    let lists = document.querySelectorAll('.list');

    tabSession.onclick = function () {
        tabSession.style.backgroundImage = 'url(img/聊天1.png)';
        tabFriend.style.backgroundImage = 'url(img/用户.png)';

        lists[0].classList.remove('hide');
        lists[1].classList.add('hide');
    };

    tabFriend.onclick = function () {
        tabSession.style.backgroundImage = 'url(img/聊天.png)';
        tabFriend.style.backgroundImage = 'url(img/用户1.png)';

        lists[0].classList.add('hide');
        lists[1].classList.remove('hide');
    };
}

initSwitchTab();


let websocket = new WebSocket("ws://127.0.0.1:8080/message");
websocket.onmessage = function (e) {
    try {
        let resp = JSON.parse(e.data);
        if (resp.type == 'message') {
            handleMessage(resp);
        } else {
            console.log("resp.type 不符合要求！");
        }
    } catch (error) {
        console.error("解析消息失败：", error);
    }
}
websocket.onopen = function () {
    console.log("websocket 连接成功！");

}
websocket.onclose = function () {
    console.log("websocket 连接断开！");
}
websocket.onerror = function () {
    console.log("websocket 连接异常！");
}


function handleMessage(resp) {
    // 把客户端收到的消息, 给展示出来. 
    // 展示到对应的会话预览区域, 以及右侧消息列表中. 

    // 1. 根据响应中的 sessionId 获取到当前会话对应的 li 标签. 
    //    如果 li 标签不存在, 则创建一个新的
    let curSessionLi = findSessionLi(resp.sessionId);
    if (curSessionLi == null) {
        // 就需要创建出一个新的 li 标签, 表示新会话. 
        curSessionLi = document.createElement('li');
        curSessionLi.setAttribute('message-session-id', resp.sessionId);
        // 此处 p 标签内部应该放消息的预览内容. 一会后面统一完成, 这里先置空
        curSessionLi.innerHTML = '<h3>' + resp.fromName + '</h3>'
            + '<p></p>';
        // 给这个 li 标签也加上点击事件的处理
        curSessionLi.onclick = function () {
            clickSession(curSessionLi);
        }
    }
    // 2. 把新的消息, 显示到会话的预览区域 (li 标签里的 p 标签中)
    //    如果消息太长, 就需要进行截断. 
    let p = curSessionLi.querySelector('p');
    p.innerHTML = resp.content;
    if (p.innerHTML.length > 10) {
        p.innerHTML = p.innerHTML.substring(0, 10) + '...';
    }
    // 3. 把收到消息的会话, 给放到会话列表最上面. 
    let sessionListUL = document.querySelector('#session-list');
    sessionListUL.insertBefore(curSessionLi, sessionListUL.children[0]);
    // 4. 如果当前收到消息的会话处于被选中状态, 则把当前的消息给放到右侧消息列表中. 
    //    新增消息的同时, 注意调整滚动条的位置, 保证新消息虽然在底部, 但是能够被用户直接看到. 
    if (curSessionLi.className == 'selected') {
        // 把消息列表添加一个新消息. 
        let messageShowDiv = document.querySelector('.right .message-show');
        addMessage(messageShowDiv, resp);
        scrollBottom(messageShowDiv);
    }
}

function findSessionLi(targetSessionId) {
    // 获取到所有的会话列表中的 li 标签
    let sessionLis = document.querySelectorAll('#session-list li');
    for (let li of sessionLis) {
        let sessionId = li.getAttribute('message-session-id');
        if (sessionId == targetSessionId) {
            return li;
        }
    }
    // 啥时候会触发这个操作, 就比如如果当前新的用户直接给当前用户发送消息, 此时没存在现成的 li 标签
    return null;
}


function initSendButton() {
    let sendButton = document.querySelector('.right .ctrl button');
    let messageInput = document.querySelector('.right .message-input');

    sendButton.onclick = function () {
        if (!messageInput.value) {
            return;
        }

        let selectedLi = document.querySelector('#session-list .selected');
        if (selectedLi == null) {
            return;
        }

        let sessionId = selectedLi.getAttribute('message-session-id');

        let req = {
            type: 'message',
            sessionId: sessionId,
            content: messageInput.value
        };
        req = JSON.stringify(req);
        console.log(req);
        websocket.send(req);

        messageInput.value = '';
    }
}
initSendButton();

function getUserInfo() {
    $.ajax({
        url: '/UserApi/userInfo',
        type: 'get',
        success: function (body) {
            if (body && body.userId > 0) {
                let userDiv = document.querySelector('.main .left .user');
                userDiv.innerHTML = body.userName;
                userDiv.setAttribute("user-id", body.userId);
            } else {
                alert("用户未登录！");
                location.assign('login.html');
            }
        }
    });
}

getUserInfo();

function getFriendList() {
    $.ajax({
        type: 'get',
        url: '/FriendApi/getFriendList',
        success: function (body) {
            let friendListUL = document.querySelector('#friend-list');
            friendListUL.innerHTML = "";
            for (let friend of body) {
                let li = document.createElement('li');
                li.innerHTML = '<h4>' + friend.friendName + '</h4>';

                li.setAttribute('friend-id', friend.friendId);
                friendListUL.appendChild(li);
                //每一个li标签，就对应界面上的一个好友的选项，给这个li加上点击事件
                li.onclick = function () {
                    //参数表示区分了当前用户点击的是那个好友
                    clickFriend(friend);
                }
            }
        },
        error: function () {
            console.log("获取好友列表失败！");
        }
    });
}

getFriendList();


function getSessionList() {
    $.ajax({
        type: 'get',
        url: '/MessageSessionApi/sessionList',
        success: function (body) {

            // 1. 清空之前的会话列表
            let sessionListUL = document.querySelector('#session-list');
            sessionListUL.innerHTML = '';
            // 2. 遍历响应的数组, 针对结果来构造页面
            for (let session of body) {
                // 针对 lastMessage 的长度进行截断处理
                if (session.lastMessage.length > 10) {
                    session.lastMessage = session.lastMessage.substring(0, 10) + '...';
                }

                let li = document.createElement('li');
                // 把会话 id 保存到 li 标签的自定义属性中. 
                li.setAttribute('message-session-id', session.sessionId);
                li.innerHTML = '<h3>' + session.friends[0].friendName + '</h3>'
                    + '<p>' + session.lastMessage + '</p>';
                sessionListUL.appendChild(li);

                // 给 li 标签新增点击事件
                li.onclick = function () {
                    // 这个写法, 就能保证, 点击哪个 li 标签
                    // 此处对应的 clickSession 函数的参数就能拿到哪个 li 标签. 
                    clickSession(li);
                }
            }
        }
    });
}

getSessionList();

function clickSession(currentLi) {
    // 1. 设置高亮
    let allLis = document.querySelectorAll('#session-list>li');
    activeSession(allLis, currentLi);
    // 2. 获取指定会话的历史消息 TODO
    let sessionId = currentLi.getAttribute("message-session-id");
    getHistoryMessage(sessionId);
}

function activeSession(allLis, currentLi) {
    // 这里的循环遍历, 更主要的目的是取消未被选中的 li 标签的 className
    for (let li of allLis) {
        if (li == currentLi) {
            li.className = 'selected';
        } else {
            li.className = '';
        }
    }
}

function getHistoryMessage(sessionId) {
    let titleDiv = document.querySelector('.right .title');
    titleDiv.innerHTML = '';
    let messageShowDiv = document.querySelector('.right .message-show');
    messageShowDiv.innerHTML = '';


    //重新设置会话的标题
    let selectedH3 = document.querySelector('#session-list .selected>h3');
    if (selectedH3) {
        // selectedH3 可能不存在的. 比如页面加载阶段, 可能并没有哪个会话被选中. 
        // 也就没有会话带有 selected 标签. 此时就无法查询出这个 selectedH3
        titleDiv.innerHTML = selectedH3.innerHTML;
    }

    //获取响应
    $.ajax({
        type: 'get',
        url: '/MessageApi/getMessage?sessionId=' + sessionId,
        success: function (body) {
            //遍历body
            for (let message of body) {
                addMessage(messageShowDiv, message);
            }
            scrollBottom(messageShowDiv);
        }
    });

}

function addMessage(messageShowDiv, message) {
    // 使用这个 div 表示一条消息
    let messageDiv = document.createElement('div');
    // 此处需要针对当前消息是不是用户自己发的, 决定是靠左还是靠右. 
    let selfUsername = document.querySelector('.left .user').innerHTML;
    if (selfUsername == message.fromName) {
        // 消息是自己发的. 靠右
        messageDiv.className = 'message message-right';
    } else {
        // 消息是别人发的. 靠左
        messageDiv.className = 'message message-left';
    }
    messageDiv.innerHTML = '<div class="box">'
        + '<h4>' + message.fromName + '</h4>'
        + '<p>' + message.content + '</p>'
        + '</div>';
    messageShowDiv.appendChild(messageDiv);
}

function scrollBottom(elem) {
    // 1. 获取到可视区域的高度
    let clientHeight = elem.offsetHeight;
    // 2. 获取到内容的总高度
    let scrollHeight = elem.scrollHeight;
    // 3. 进行滚动操作, 第一个参数是水平方向滚动的尺寸. 第二个参数是垂直方向滚动的尺寸
    elem.scrollTo(0, scrollHeight - clientHeight);
}


function clickFriend(friend) {
    // 1. 先判断一下当前这个好友是否有对应的会话
    let sessionLi = findSessionByName(friend.friendName);
    let sessionListUL = document.querySelector('#session-list');
    if (sessionLi) {
        // 2. 如果存在匹配结果，就把这个会话设置成选中状态，并且置顶
        sessionListUL.insertBefore(sessionLi, sessionListUL.children[0]);
        // clickSession(sessionLi);
        sessionLi.click();
    } else {
        // 3. 如果不存在匹配的结果,就创建个新会话(创建li标签+通知服务器当前会话需要处理)
        sessionLi = document.createElement('li');
        sessionLi.innerHTML = '<h3>' + friend.friendName + '</h3>' + '<p></p>';
        sessionListUL.insertBefore(sessionLi, sessionListUL.children[0]);
        sessionLi.onclick = function () {
            clickSession(sessionLi);
        }
        sessionLi.click();
        createSession(friend.friendId, sessionLi);
    }

    // 4. 标签页切换到会话列表
    let tabSession = document.querySelector('.tab .tab-session');
    tabSession.click();
}

function findSessionByName(userName) {
    let sessionList = document.querySelectorAll('#session-list>li');
    for (let sessionLi of sessionList) {
        let h3 = sessionLi.querySelector('h3'); // 确保 h3 是一个 DOM 元素
        if (h3 && h3.innerHTML == userName) {
            return sessionLi;
        }
    }
    return null;
}

function createSession(friendId, sessionLi) {
    $.ajax({
        type: 'post',
        url: 'MessageSessionApi/session?toUserId=' + friendId,
        success: function (body) {
            console.log("会话创建成功！ sessionId =" + body.sessionId);
            sessionLi.setAttribute('message-session-id', body.sessionId);
        },
        error: function () {
            console.log("回话创建失败！");
        }
    });
}